import QueryFilter from "@/components/QueryFilter"
import useAntdList from "@/hooks/useAntdList"
import { queryAccount } from "@/service/globalSetting"
import { Card, Col, Form, List, Row, Table } from "antd"
import { Pie } from '@ant-design/plots';
import BrowserCard from "./components/BrowserCard";
import SystemCard from "./components/SystemCard";
import RatioCard from "./components/RatioCard";
import TimeIntervalCard from "./components/TimeIntervalCard";

const App = () => {
    const data = [
        {
          type: '分类一',
          value: 27,
        },
        {
          type: '分类二',
          value: 25,
        },
        {
          type: '分类三',
          value: 18,
        },
        {
          type: '分类四',
          value: 15,
        },
        {
          type: '分类五',
          value: 10,
        },
        {
          type: '其他',
          value: 5,
        },
      ];
    const config = {
        appendPadding: 5,
        data,
        angleField: 'value',
        colorField: 'type',
        radius: 0.8,
        label: {
          type: 'outer',
          content: '{name} {percentage}',
        },
        interactions: [
          {
            type: 'pie-legend-active',
          },
          {
            type: 'element-active',
          },
        ],
      };
    return <div>
      <Row wrap>

     
      {
        [
          {title:'访问时段',flex:'100%', Card:<TimeIntervalCard/>},
          {title:'浏览器',Card:<BrowserCard/>},
          {title:'系统',Card:<SystemCard/>},
        // {title:'城市',Card:<SystemCard/> },
        // {title:'运营商'},
        // {title:'网络类型'},
        // {title:'JS错误'},
       
        // {title:'运行环境'},
        // {title:'浏览器版本'},
        {title:'屏幕分辨率',Card:<RatioCard/>},
      ].map(item=>{
        return <Col flex={item.flex||'25%'}  style={{ padding:12,boxSizing:'border-box' }}>
            <Card style={{borderRadius:12}} size='small' hoverable title={item.title}>
            {item.Card}
            </Card>
          </Col>
      })
      }
       </Row>
          {/* <List
           grid={{ gutter: 16, column: 4, }}
          dataSource={[{title:'浏览器',Card:<BrowserCard/>},
          {title:'系统',Card:<SystemCard/>},
          // {title:'城市',Card:<SystemCard/> },
          // {title:'运营商'},
          // {title:'网络类型'},
          // {title:'JS错误'},
          {title:'访问时段',Card:<TimeIntervalCard/>},
          // {title:'运行环境'},
          // {title:'浏览器版本'},
          {title:'屏幕分辨率',Card:<RatioCard/>},
        ]}
          renderItem={(v:any)=> <List.Item>
   
            <Card size='small' hoverable title={v.title}>
            {v.Card}
            </Card>
            {/* <Card size='small' hoverable title={v.title}>
               <Pie {...config} />
            </Card> 
            </List.Item>}
          ></List> */}
        
    </div>
}
export default App